<template>
<div>
  <div class="flex items-center justify-center">
    <div class=" max-w-xl   relative">
      relative ==> 相对父容器
      <div class="bg-gray-900 h-26  flex    justify-between   relative  ">
        <div>  <input  class=""/>  </div>
        <button v-if="isOpen" @click="isOpen = false" tabindex="-1" class="fixed inset-0 h-full w-full bg-black opacity-50 text-white text-6xl  cursor-default">背景遮盖层</button>
        <div class="z-30 ">
          <button @click="isOpen = !isOpen" type="button" class="block text-gray-500  hover:text-white focus:text-white focus:outline-none">
            <svg class="h-12 w-12 fill-current" viewBox="0 0 24 24">
              <path v-if="isOpen" fill-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"/>
              <path v-if="!isOpen" fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
            </svg>
          </button>
        </div>
      </div>
      <!--    -->
      <transition
          enter-active-class="transition-all transition-fastest ease-out-quad"
          leave-active-class="transition-all transition-faster ease-in-quad"
          enter-class="opacity-0 scale-70"
          enter-to-class="opacity-100 scale-100"
          leave-class="opacity-100 scale-100"
          leave-to-class="opacity-0 scale-70"         >
        <div    v-if="isOpen"   class="px-2 pt-2 pb-4 bg-white   w-1/3  rounded-lg    absolute   right-0    ">
          <a href="#" class="block       px-2 py-1   text-center   hover:bg-red-800"> 主页 </a>
          <a href="#" class="block mt-1  px-2 py-1   text-center  hover:bg-red-800"> 个人 </a>
          <a href="#" class="block mt-1  px-2 py-1    hover:bg-red-800"> 后台 </a>
          <a href="#" class="block mt-1  px-2 py-1    hover:bg-red-800"> 后台 </a>
        </div>
      </transition>


      <!--    -->
      <div class="font-bold text-red-600  ">
        asfdasdasd  Lodoloremque id ipsum perspiciatis vel.
      </div>
      <!--    -->
    </div>


  </div>
</div>
</template>

<script>

export default {
  name: "Header",
  data() {
    return {
      isOpen:true
    }
  },
  methods: {
  },
  created() {
    // const vConsole = new VConsole();
// or init with options

// remove it when you finish debugging
//     vConsole.destroy();
  }
}
</script>

<style>

</style>
